<template>
  <a-modal :title="title" :after-close="reset" @ok="submit">
    <a-form
      ref="formRef"
      :model="form"
      :rules="rules"
      :label-col="{ style: { width: '80px' } }"
    >
      <a-form-item label="提货点名称：" name="name">
        <a-input
          v-model:value="form.name"
          maxlength="40"
          placeholder="提货点名称"
        />
      </a-form-item>
      <a-form-item label="提货点简介：" name="introduction">
        <a-input
          v-model:value="form.introduction"
          maxlength="40"
          placeholder="提货点简介"
        />
      </a-form-item>
      <a-form-item label="手机号码" name="phone">
        <a-input v-model:value="form.phone" placeholder="手机号码" />
      </a-form-item>
      <a-form-item label="提货点地址：" name="address">
        <a-cascader
          v-model:value="form.address"
          class="dialogWidth"
          clearable
          :options="addresData"
          :field-names="{ label: 'name', value: 'name', children: 'child' }"
          @change="handleChange"
        />
      </a-form-item>
      <a-form-item label="详细地址" name="detailedAddress">
        <a-input v-model:value="form.detailedAddress" placeholder="详细地址" />
      </a-form-item>

      <a-form-item name="image" label="门店logo" class="flex-row">
        <upload-img v-model="form.image" placeholder="门店logo" />
      </a-form-item>
      <a-form-item label="经纬度" name="latitude">
        <a-input v-model:value="form.latitude" placeholder="纬度" />
      </a-form-item>
      <a-form-item label="提货点营业：" name="dayTime">
        <a-time-range-picker
          v-model:value="dayTime"
          is-range
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="HH:mm:ss"
          @change="onchangeTime"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { storeAddup, storeinfo, cityListTree } from './api';
import { Istore, type IIstore } from './entity';
import { validReg } from '@/utils/validate';

const props = withDefaults(defineProps<{
  data: Partial<IIstore>
}>(), {
})
let dayTime = $ref<string[]>(['', ''],)
const title = computed(() => props.data.id ? '编辑' : '新增')
const { formRef, submit, close } = useDialog({ validCallback: save })

let form = $ref(new Istore())
watchEffect(() => {
  if (props.data.id) {
    storeinfo(props.data.id).then(res => {
      form.setProps(res)
      dayTime = res.dayTime.split(',')
    })
  }
})

const rules = {
  name: [validReg('required', '此项为必填项')],
  address: [validReg('required', '此项为必填项')],
   dayTime: [validReg('required', '此项为必填项')],
     phone: [validReg('phone', '手机号有误')],
     detailedAddress: [validReg('required', '此项为必填项')],
}

onMounted(() => {
  getCityList()
})
const emit = defineEmits(['change'])
function onchangeTime(e) {
  form.dayTime = e ? e.join(',') : '';
}
function save() {
  storeAddup(form).then(() => {
    AntMessage.success('保存成功')
    close()
    emit('change')
  })
}
let addresData = $ref([])
async function getCityList() {
  cityListTree().then(res => {
    sessionStorage.setItem('cityList', JSON.stringify(res));
    let cityList = JSON.parse(sessionStorage.getItem('cityList') as string);
    addresData = cityList;
  })
}
   function   handleChange(e){
        let province = e[0];
        let city = e[1];
        let area = e[2];
        if(e.length===2){
          form.address = province + ',' + city;
        }else if(e.length===3){
          form.address = province + ',' + city + ',' + area;
        }
      }
function reset() {
  form = new Istore()
}
</script>

<style lang="less"></style>
